<template>
	<div>
		<transition name="fadeInf">
			<div id="learnLine" v-show="B"></div>
		</transition>
		<div id="slips">
			<div id="s1">
				<img src="../assets/img/vue.png" />
				<p>Vue</p>
			</div>
			<div id="s2">
				<img src="../assets/img/java.png" />
				<p>Java</p>
			</div>
			<div id="s3">
				<img src="../assets/img/android.png" />
				<p>Android</p>
			</div>
			<div id="s4">
				<img src="../assets/img/unity.png" />
				<p>Unity</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
	data(){
	   	return{
	   		B:true
	   	}
	}
}
</script>

<style>
	#slips{
		position: absolute;
		top: 10%;
		left: 40%;
		width: 400px;
		height: 400px;
		cursor: pointer;
	}
	#slips p{
		position: relative;
		font-family: "微软雅黑";
		font-size: 24px;
		top: 7px;
		left: 0px;
		font-weight: 500;
		color: #515151;
		text-align: center;
		
	}
	#slips div{
		position: absolute;
		width: 80%;
		height: 50%;
		color: #515151;
		border: 1px solid #CCCCCC;
		border-radius: 5px;
		box-shadow: 0 0 5px #CCCCCC;
	}
	#s1{
		
		left: -30px;
		top: -20px;
	}
	#s2{
		left: 350px;
		top: -20px;
	}
	#s3{
		left:-30px;
		top: 210px;
	}
	#s4{
		top: 210px;
		left: 350px;
	}
	#slips img{
    	position: relative;
    	width: 100%;
    	height: 80%;
		border-radius: 5px 5px 0px 0px;
    }
    #learnLine{
    	position: absolute;
		top: 70%;
		left: 9.8%;
		width: 80px;
		height: 3px;
		background-color: #515151;
    }
 
</style>